$(window).load(function() {
    var data = [{
        "src": "images/3.jpg"
    },
    {
        "src": "images/4.jpg"
    },
    {
        "src": "images/5.jpg"
    },
    {
        "src": "images/6.jpg"
    },
    {
        "src": "images/7.jpg"
    },
    {
        "src": "images/8.jpg"
    },
    {
        "src": "images/9.jpg"
    },
    {
        "src": "images/10.jpg"
    }];
    PBL("#pubu", ".box", 2);
    var ajaxkey = true;
    $(window).scroll(function() {
        if (getDataCheck() && ajaxkey) {
            var pubu = $("#pubu");
            for (i in data) {
                var box = $("<div class='box'><div class='pic'><img src=" + data[i].src + "></div></div>");
                pubu.append(box);
            }
            PBL("#pubu", ".box", 2);
        };
    });
}) function PBL(outer, boxs, style) {
    var pubu = $(outer);
    var box = $(boxs);
    var num = Math.floor($(document.body).width() / box.outerWidth()); //根据浏览器宽度获得显示的列的数量
    pubu.width(num * (box.outerWidth()));
    var allHeight = [];
    for (var i = 0; i < box.length; i++) {
        if (i < num) {
            allHeight[i] = box.eq(i).outerHeight();
        } else {
            var minHeight = Math.min.apply({},
            allHeight);
            var sy = getSy(minHeight, allHeight);
            getStyle(box.eq(i), minHeight, sy * box.eq(i).outerWidth(), i, style);
            allHeight[sy] += box.eq(i).outerHeight();
        }
    }
}
function getSy(minH, allH) {
    for (sy in allH) {
        if (allH[sy] == minH) return sy;
    }
}
function getData() {
    ajaxkey = false;
    $.ajax({
        type: "get",
        url: "request.php",
        data: "",
        dataType: "json",
        success: function(data) {
            var pubu = $();
            for (i in data) {
                var box = $("<div class='box'><div class='pic'><img src=" + data[i].src + "></div></div>");
                pubu.append(box);
            }
            PBL("#pubu", ".box", 2);
        },
        complete: function() {
            ajaxkey = true;
        }
    });
}
function getDataCheck() {
    var pubu = $("#pubu");
    var box = $(".box");
    var lastboxHeight = $(box[box.length - 1]).offset().top + Math.floor($(box[box.length - 1]).outerHeight() / 2);
    var documentHeight = $(window).height();
    var scrollTop = $(document).scrollTop();
    return lastboxHeight < documentHeight + scrollTop ? true: false;
}
var getStartNum = 0;
function getStyle(boxs, top, left, index, style) {
    if (getStartNum >= index) {
        return;
    }
    boxs.css("position", "absolute");
    switch (style) {
    case 1:
        boxs.css({
            "top":
            top + $(window).height(),
            "left": left
        });
        boxs.stop().animate({
            "top": top,
            "left": left
        },
        999);
        break;
    case 2:
        boxs.css({
            "top":
            top,
            "left": left,
            "opacity": "0"
        });
        boxs.stop().animate({
            "opacity": "1"
        },
        999);
    }
    getStartNum = index;
};